<template>
    <div>
        <Headers>商品管理</Headers>
        <div id="manage" class="page-body">
            <div class="manage-list" v-for="(m,i) in shoppingCartClassify" :key="i">
                <div class="manage-classify">
                    <span class="fa check" :class="m.isCheck?'fa-check-square':'fa-square-o'" @click="isClassifyCheck(i)"></span>
                    <span>{{m.name}}</span>
                    <span class="fa fa-chevron-right"></span>
                </div>
                <div class="manage-product" v-for="(g,j) in m.goods" :key="j">
                    <div><span class="fa check" :class="g.isCheckd?'fa-check-square':'fa-square-o'" @click="isCheck(i,j)"></span></div>
                    <img :src="g.goodsOfImg[0]" alt="">
                    <div class="manage-product-main">
                        <div>{{g.nameOfGoods}}</div>
                        <div>￥{{g.price}}.00
                            <br>
                            <button @click="minClack(i,j)">-</button>
                            {{g.count}}
                            <button @click="addClack(i,j)">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="delete"><div>您一共选择了:{{gross}}件商品</div><div @click="deleteClick">删除</div></div>
        <Navbar></Navbar>
    </div>
</template>

<script>
import Navbar from "../components/Navbar.vue";
import Headers from "../components/Headers.vue";
import {mapState} from "vuex";
export default {
    components:{ Navbar,Headers },
    mounted:function(){
        this.$store.dispatch("requestShoppingCart");
    },
    computed:{
        ...mapState([
            "shoppingCartClassify",
        ]),
    },
    data:function(){
        return {
            checkId:[],
            addProduct:[],
            total:0,
            gross:0,
        }
    },
    methods:{
        minClack:function(i,j){
            this.$store.dispatch("requestCount",{id:this.shoppingCartClassify[i].goods[j]._id,change:false});
            this.total = 0;
            this.gross = 0;
            this.addProduct = [];
            this.checkId = [];
            
        },
        addClack:function(i,j){

            this.$store.dispatch("requestCount",{id:this.shoppingCartClassify[i].goods[j]._id,change:true});
            this.total = 0;
            this.gross = 0;
            this.addProduct = [];
            this.checkId = [];
            
        },
        isClassifyCheck:function(i){
            if(this.shoppingCartClassify[i].isCheck){
                this.shoppingCartClassify[i].isCheck = false;
                this.shoppingCartClassify[i].goods.forEach(function(v) {
                    v.isCheckd = false;
                    this.checkId.forEach(function(c,t) {
                        if(c==v._id){
                            this.checkId.splice(t,1);
                            this.addProduct.splice(t,1);
                        }
                    }, this);
                }, this);               
            }else{
                this.shoppingCartClassify[i].isCheck = true;
                
                this.shoppingCartClassify[i].goods.forEach(function(v) {
                    
                    v.isCheckd = true;
                    this.checkId.push(v._id);
                    var arr = {};
                    arr.price = v.price;
                    arr.count = v.count;
                    this.addProduct.push(arr);
                }, this);
            }
            this.total = 0;
            this.gross = 0;
            this.addProduct.forEach(function(c){
                this.gross = c.count+this.gross;
                this.total = c.price*c.count+this.total;
                
            },this)
        },
        isCheck:function(i,j){
            if(this.shoppingCartClassify[i].goods[j].isCheckd){
                this.shoppingCartClassify[i].goods[j].isCheckd = false;
                this.checkId.forEach(function(c,t) {
                    if(c==this.shoppingCartClassify[i].goods[j]._id){
                        this.checkId.splice(t,1);
                        this.addProduct.splice(t,1);
                    }
                }, this);
            }else{
                this.shoppingCartClassify[i].goods[j].isCheckd = true;
                this.checkId.push(this.shoppingCartClassify[i].goods[j]._id);
                var arr = {};
                arr.price = this.shoppingCartClassify[i].goods[j].price;
                arr.count = this.shoppingCartClassify[i].goods[j].count;
                this.addProduct.push(arr);
            }
            this.shoppingCartClassify[i].isCheck = true;
            this.shoppingCartClassify[i].goods.forEach(function(v) {
                if(!v.isCheckd){
                    this.shoppingCartClassify[i].isCheck = false;
                }
            }, this);
            this.total = 0;
            this.gross = 0;
            this.addProduct.forEach(function(c){
                this.gross = c.count+this.gross;
                this.total = c.price*c.count+this.total;
                this.$store.commit("setGross",{gross:this.gross,total:this.total});
            },this)
            this.$forceUpdate();
        },
        deleteClick:function(){
            if(this.checkId.length>0){
                this.$store.dispatch("requestRemoveShoppingcart",{checkId:this.checkId});
            }else{
                console.log("您还未选择任何商品")
            }
            

        }
    }
}
</script>

<style scoped>
    .page-body{
        overflow-y: scroll;
        height: calc(100vh - 132px);
    }
    #manage{
        margin-top: 44px;
        background-color: #eeeeee;
    }
    .manage-list{
        margin-top: 4px;
        font-weight: 700;
        background-color: white;
    }
    .manage-classify{
        margin: 0 4px;
        height: 25px;
        line-height: 25px;
    }
    .check{
        color: red;
        height: 100%;
    }
    .manage-product{
        background-color: #eeeeee;
        display: flex;
        padding: 4px;
        padding-left: 15px;
        line-height: 120px;
        height: 120px;
    }
    img{
        width: 100px;
        height: 100px;
        padding: 5px;
        margin-top: 4px;
    }
    .manage-product-main{
        display: flex;
        flex-grow: 1;
        font-weight: normal;
        line-height: 1rem;
        justify-content: space-between;
        padding: 5px;
    }
    .manage-product-main div:nth-of-type(1){
        width: 60%;
        font-size: 14px
    }
    button{
        background-color: red;
        border: none;
    }

    #delete{
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 45px;
        font-size: 14px;
    }
    #delete div:nth-of-type(1){
        width: 60%;

    }
    #delete div:nth-of-type(2){
        color: white;
       background-color: red;
       width: 30%;
    }

</style>